<template>

  <main class="main-content">
    <div class="illustration">
      <img src="../assets/svg/welcome/teacher.svg" alt="Illustration" style="width: 800px"> <!-- 插图图片 -->
    </div>
    <div class="text-content">
      <h1>利用AI技术<br>提供专业、高效的教育服务</h1> <!-- 主标题 -->
<!--      <a href="#try" class="cta-button">立即体验</a> &lt;!&ndash; CTA按钮 &ndash;&gt;-->
      <el-button
      class="try-button"
      >立即体验</el-button>
    </div>
  </main>
  <div class="white-space"></div> <!-- 插入的白色空白区域 -->

  <div class="footer-up"></div>
  <footer class="footer">
    <div class="footer-content">
      <div class="footer-logo">
        <h2 class="header-title">AIToEdu</h2>
        <img src="../assets/logo.png" style="height: 40px">
      </div>
      <div class="footer-links">
        <h3>关于我们</h3>
        <a href="#contact">联系我们</a>
        <a href="#join">加入我们</a>
        <a href="#cooperation">合作伙伴</a>
        <a href="#news">新闻动态</a>
        <a href="#feedback">意见反馈</a>
        <a href="#navigation">网站导航</a>
      </div>
      <div class="footer-links">
        <h3>产品服务</h3>
        <a href="#ai-courses">人工智能课程</a>
        <a href="#online-education">在线教育平台</a>
        <a href="#learning-app">学习型应用</a>
        <a href="#trial">限时试用</a>
        <a href="#online-qna">在线问答</a>
      </div>
      <div class="footer-links">
        <h3>帮助中心</h3>
        <a href="#faq">常见问题</a>
        <a href="#user-guide">使用指南</a>
        <a href="#online-service">在线客服</a>
        <a href="#user-community">用户社区</a>
        <a href="#feedback">意见反馈</a>
      </div>
      <div class="footer-contact">
        <h3>关注我们</h3>
        <a href="#" class="social-media">
          <img src="../assets/svg/contact/ins.svg">
        </a>
        <a href="#" class="social-media">
          <img src="../assets/svg/contact/twitter.svg">
        </a>
        <a href="#" class="social-media">
          <img src="../assets/svg/contact/wechat.svg">
        </a>
        <a href="#" class="social-media">
          <img src="../assets/svg/contact/sina.svg">
        </a>
      </div>
      <el-divider></el-divider>
    </div>
    <div class="footer-bottom">
      <div>&copy;2023 版权所有，保留所有权利。</div>
      <div class="footer-copy">
        <a href="#privacy">隐私政策</a>
        <a href="#service-terms">服务条款</a>
        <a href="#cookie-settings">Cookie设置</a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {

}
</script>

<style>

.main-content {
  position: relative;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 水平分隔内容 */
  align-items: center; /* 垂直居中 */
  height: 1000px; /* 设置主体部分的高度 */
  padding: 50px; /* 主体部分内边距 */
  background-image: url("../assets/svg/welcome/main-background.svg");
  background-size: cover;
}

.main-content .illustration {
  margin-left: 80px;
}

.main-content .text-content {
  color: white; /* 文本内容颜色 */
  text-align: left;
  padding-left: 20px; /* 左边内边距 */
  margin-right: 70px;
}

.main-content .text-content .try-button {
  color: #339AF0;
  font-size: 30px;
  width: 200px;
  height: 70px;
  border-radius: 10px;
}

.main-content h1 {
  font-size: 50px; /* 主标题字体大小 */
  line-height: 1.5em; /* 行高 */
}

.white-space {
  height: 2000px; /* 设置白色空白区域的高度 */
  background-color: #ffffff; /* 设置背景颜色为白色 */
}

.footer-up {
  background-image: url("../assets/svg/welcome/footer-background.svg");
  height: 170px;
  background-size: cover;
}

.footer {
  background-color: #409eff; /* 页脚背景颜色 */
  color: white; /* 页脚字体颜色 */
  padding: 50px; /* 页脚内边距 */
}

.footer .footer-content {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between;
  gap: 20px;
}

.footer .footer-content .child(1) {
  align-content: center;
}

.footer .footer-logo {
  display: flex;
  align-items: center;
  height: 40px;
  margin-left: 5%;
}

.footer .footer-logo h2 {
  margin-right: 10px;
}

.footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer .footer-contact {
  margin-right: 5%;
}

.footer h3 {
  margin-bottom: 10px; /* 标题下方的间距 */
}

.footer a {
  color: white; /* 链接颜色 */
  text-decoration: none; /* 去掉链接下划线 */
  display: block; /* 块级显示 */
  margin-bottom: 5px; /* 链接下方的间距 */
}

.footer .social-media {
  display: inline-block;
  margin-right: 10px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 5px;
}

.footer-bottom .footer-copy {
  display: flex;
  gap: 30px;
}

</style>
